<template>
  <view class="login-new-container">
    <!-- 顶部头部区域 -->
    <view class="header">
      <view class="back" @tap="goBack">←</view>
      <view class="title">个人中心</view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="profile-card">
      <!-- 微信头像组件（小程序端生效） -->
      <open-data type="userAvatarUrl" class="avatar" v-if="isWeixin"></open-data>
      <!-- 其他端降级为默认头像 -->
      <image v-else class="avatar" :src="avatarUrl" mode="cover"></image>
      <view class="status-text">已登录</view>
    </view>

    <!-- 功能区 -->
    <view class="feature-grid">
      <view class="feature-item" @tap="clearCache">
        <view class="feature-icon broom">🧹</view>
        <view class="feature-text">清除缓存</view>
      </view>
      <!-- <view class="feature-item" @tap="more">
        <view class="feature-icon more">＋</view>
        <view class="feature-text">更多</view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoginNew',
  data() {
    return {
      avatarUrl: '/static/profile.jpg',
      isWeixin: false
    }
  },
  onLoad() {
    try {
      const info = uni.getSystemInfoSync()
      this.isWeixin = info.platform === 'mp-weixin' || info.uniPlatform === 'mp-weixin'
    } catch (e) {
      this.isWeixin = false
    }
  },
  methods: {
    goBack() {
      // 始终返回首页，若切换失败则降级重启到首页
      uni.switchTab({
        url: '/pages/index',
        fail: () => {
          uni.reLaunch({ url: '/pages/index' })
        }
      })
    },
    clearCache() {
      try {
        uni.clearStorageSync()
        uni.showToast({ title: '已清除', icon: 'success' })
      } catch (e) {
        uni.showToast({ title: '清除失败', icon: 'error' })
      }
    },
    more() {
      uni.showToast({ title: '更多功能开发中', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-new-container {
  min-height: 100vh;
  background: #f7f8fa;
}

.header {
  height: 160rpx;
  background: linear-gradient(180deg, #20a0ff 0%, #2fc3ff 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 20rpx; /* 顶部安全区留白 */
  box-sizing: border-box;
  z-index: 1;
}

.back {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  line-height: 1;
}

.profile-card {
  background: #fff;
  margin: 20rpx 30rpx 30rpx; /* 移除上移，卡片不覆盖头部 */
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
}

.avatar {
  width: 132rpx;
  height: 132rpx;
  border-radius: 66rpx;
  margin-right: 24rpx;
  background: #eaf2ff;
  overflow: hidden;
}

.status-text {
  font-size: 48rpx;
  color: #1492ff;
  font-weight: 700;
}

.feature-grid {
  margin: 20rpx 30rpx 0;
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 20rpx;
  display: flex;
  justify-content: center;
}

.feature-item {
  width: 300rpx;
  height: 220rpx;
  border-radius: 20rpx;
  background: #f7fbff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 2rpx #eaf2ff;
}

.feature-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  font-size: 44rpx;
  &.broom {
    background: rgba(255, 193, 7, 0.15);
    color: #f4a300;
  }
  &.more {
    background: rgba(45, 206, 137, 0.15);
    color: #2dce89;
  }
}

.feature-text {
  font-size: 28rpx;
  color: #333;
}
</style> 